import React from 'react'
import {Button, Card, Col, Row, Statistic, Table} from 'antd';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';

function Index() {
    // 热门商品数据
    const hotProducts = [
        {
            id: 1,
            name: '商品A',
            sales: 1230,
            price: 99.99,
        },
        {
            id: 2,
            name: '商品B',
            sales: 980,
            price: 149.99,
        },
        {
            id: 3,
            name: '商品C',
            sales: 850,
            price: 79.99,
        },
        {
            id: 4,
            name: '商品D',
            sales: 620,
            price: 199.99,
        },
        {
            id: 5,
            name: '商品E',
            sales: 540,
            price: 129.99,
        }
    ];

    // 热门商品表格列定义
    const columns = [
        {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '销量',
            dataIndex: 'sales',
            key: 'sales',
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
            render: (price) => `¥${price}`,
        }
    ];

    return (
        <div>
            <Card title="在售商品总数">
                <Row gutter={16}>
                    <Col span={12}>
                        <Statistic title="Active Users" value={112893} />
                    </Col>
                    <Col span={12}>
                        <Statistic title="Account Balance (CNY)" value={112893} precision={2} />
                        <Button style={{ marginTop: 16 }} type="primary">
                            Recharge
                        </Button>
                    </Col>
                    <Col span={12}>
                        <Statistic title="Active Users" value={112893} loading />
                    </Col>
                </Row>
            </Card>,
            <Card>
                <Row gutter={16}>
                    <Col span={12}>
                        <Card variant="borderless">
                            <Statistic
                                title="Active"
                                value={11.28}
                                precision={2}
                                valueStyle={{ color: '#3f8600' }}
                                prefix={<ArrowUpOutlined />}
                                suffix="%"
                            />
                        </Card>
                    </Col>
                    <Col span={12}>
                        <Card variant="borderless">
                            <Statistic
                                title="Idle"
                                value={9.3}
                                precision={2}
                                valueStyle={{ color: '#cf1322' }}
                                prefix={<ArrowDownOutlined />}
                                suffix="%"
                            />
                        </Card>
                    </Col>
                </Row>
            </Card>
            <Card title="热门商品排行" style={{ marginTop: 20 }}>
                <Table
                    dataSource={hotProducts}
                    columns={columns}
                    pagination={false}
                    rowKey="id"
                />
            </Card>
        </div>

    )
}

export default Index
